<template>
  <Table :scroll="{ y: detailHeight - 35 }" :columns="statusColumns" :data-source="statusDatas" :pagination="false" bordered size="small" />
</template>
<script setup>
  import { useStore } from 'vuex';
  import { ref, reactive, inject, watch, onMounted } from 'vue';
  import { Table } from 'ant-design-vue';

  const $store = useStore();

  const $http = inject('$http');
  const $eventBus = inject('$eventBus');

  const props = defineProps({
    dbIndex: {
      type: Number,
      default: () => 0
    }
  });

  const currentDbIndex = ref(0);
  const detailHeight = ref(400);
  const statusDatas = ref([]);

  const statusColumns = reactive([
    { title: '序号', align: 'center', width: 60, customRender: ({ index }) => index + 1 },
    { title: '变量名', dataIndex: 'name', width: 300 },
    { title: '值', dataIndex: 'value', ellipsis: true, width: 80 },
    { title: '状态值', dataIndex: 'status', ellipsis: true, width: 100 },
    { title: '变量详情', dataIndex: 'description', ellipsis: true }
  ]);

  watch(currentDbIndex, () => getStatus());

  function getStatus() {
    $http.post(`/api/db/${currentDbIndex.value}/status`).then(rs => {
      statusDatas.value = rs.datas;
    });
  }

  function ResizeDetailPanel(area) {
    detailHeight.value = area.height - 140;
  }

  onMounted(() => {
    currentDbIndex.value = props.dbIndex;

    $eventBus.on('status-tab-changed', dbIndex => {
      currentDbIndex.value = dbIndex;
    });

    let area = $store.state.area.content;

    ResizeDetailPanel(area);

    $eventBus.on('windowResizeChanged', client => ResizeDetailPanel(client));
  });
</script>
